<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>sessionStorage</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h2>sessionStorage</h2>
		<button type="button" onclick="saveData()">点击保存数据</button>
		<button type="button" onclick="readData()">点击读取数据</button>
		<button type="button" onclick="deletData()">点击删除数据</button>
		<button type="button" onclick="deletAllData()">点击清空数据</button>
		
		<script type="text/javascript">
			
			// sessionStorage 存储的内容随着浏览器窗口的关闭而消失
			
			let p = {name:'张三',age:'18'}
			// console.log(p.toString())
		
			function saveData(){
				// key 和 value 都得是字符串
				window.sessionStorage.setItem('msg','hello??!');
				window.sessionStorage.setItem('msg2',666);
				window.sessionStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				// key 和 value 都得是字符串
				console.log(window.sessionStorage.getItem('msg2'));
				console.log(window.sessionStorage.getItem('msg'));
				
				let result = sessionStorage.getItem('person')
				console.log(JSON.parse(result));
				// 对应的value获取不到 getItem则会显示 null
				console.log(window.sessionStorage.getItem('msg3'));
			}
			function deletData(){
				// key 和 value 都得是字符串
				sessionStorage.removeItem('msg')
				
			}
			function deletAllData(){
				// key 和 value 都得是字符串
				sessionStorage.clear();
				
			}
		</script>
	</body>
</html>
